<template>
    <el-descriptions title="详情" direction="vertical" :column="4" border>
        <el-descriptions-item :label="tableHeadData[item]" v-for="(item ,index) in Object.keys(tableHeadData)" :key="index">{{ messageData[item] }}</el-descriptions-item>
        
    </el-descriptions>
</template>

<script>
import axios from 'axios'
export default {
        data(){
            return {
                tableHeadData:{
                    messageId: '消息id',
                    title: '标题',
                    
                    content: '主要内容',
                    timestamp: '日期',


                },
                messageData:{

                }
            }
        },
        created(){
            let message_id = this.$route.params.id

            axios.get(`/prod-api/massage?massage_id=${message_id}`)
                    .then(response=>{
                        this.messageData = response.data.data
                    }).catch(error=>{
                        this.$router.push({path:'/error',params:{error:error}})
                    })

            
        },
        watch: {
            '$route': {
                handler() {
                    // 处理路由变化的逻辑
                    this.loadDataBasedOnRoute();
                },
                immediate: true  // 立即执行一次handler函数
            },
        
        },
        methods:{
            loadDataBasedOnRoute() {
                let message_id = this.$route.params.id;

                axios.get(`/prod-api/massage?massage_id=${message_id}`)
                    .then(response => {
                        this.messageData = response.data.data;
                    }).catch(error => {
                        this.$router.push({ path: '/error', params: { error: error } });
                    });
            }
        }
}
</script>

<style>

</style>